<template>
	<view>
		<!-- F1顶部条 -->
		<zgzTopbar></zgzTopbar>
		<!-- F2轮播广告 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500"
				indicator-active-color="#fff">
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/sort/首页轮播图/1.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/sort/首页轮播图/2.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/sort/首页轮播图/3.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/sort/首页轮播图/4.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/sort/首页轮播图/5.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- F3健身补剂 -->
		<zgzProductFloor title="健身补剂/1F" :item="F1" href="/pages/productList/productList?fid=1"></zgzProductFloor>
		<!-- F4 健身器材-->
		<zgzProductFloor title="健身器材/2F" :item="F2" href="/pages/productList/productList?fid=2"></zgzProductFloor>
		<!-- F5运动服饰 -->
		<zgzProductFloor title="运动服饰/3F" :item="F3" href="/pages/productList/productList?fid=5"></zgzProductFloor>
		<!-- F6底部栏 -->
		<zgzFooter></zgzFooter>

	</view>
</template>

<script>
	import {
		homeList
	} from '@/service/index.js'
	export default {
		data() {
			return {
				F1: [],
				F2: [],
				F3: []

			}
		},
		async onLoad() {
			let res = await homeList()
			// console.log(res.res[1][0].fid);
			this.F1 = res.res[0]
			this.F2 = res.res[1]
			this.F3 = res.res[2]

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		//渐变色背景图
		background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

		.swiper {
			margin: 0px 12px;
			height: 240rpx;
			border-radius: 6px;
			overflow: hidden;

			image {
				width: 100%;
			}
		}
	}
</style>
